<template>
  <div class="demo">
    我是子组件, 当前计数是： {{ count }}
    <div>
      <p>获取父组件的数据:{{ parentData }}</p>
      <el-button type="primary" @click="getParentData($parent)">点击获取父组件数据</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(100)
const parentData = ref('')

const increment = (val: number) => {
  count.value += val
}

const getParentData = ($parent: any) => {
  console.log('父组件数据:', $parent.parentData)
  parentData.value = $parent.parentData
}

defineExpose({
  count,
  increment,
})
</script>

<style scoped>
.demo {
  width: 300px;
  height: 300px;
  background: lightgoldenrodyellow;
}
</style>
